<%@ page language = "java" contentType = "text/html; charset=ISO-8859-1"
    pageEncoding = "ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri = "/WEB-INF/tld/struts-html.tld" prefix = "html" %>
<html>
	<head>
		<meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1">
		<title>WelCome to metaConnect</title>
		<link rel = "StyleSheet" href = "css/index.css" />
		<link rel = "StyleSheet" href = "css/login_style.css" />
		<script src = "js/jquery-1.7.1.min.js"></script>
		<script type = "text/javascript">
			$(document).ready( function(){
				$("#define_metaconnect").click(function(){
					$(".team_member").css('display','none');
					$(".define_metaconnect").slideToggle("slow");
				}); 
			});
		</script>
		<script type = "text/javascript">
			$(document).ready( function(){
				$("#team_member").click(function(){
					$(".define_metaconnect").css('display','none');
					$(".team_member").slideToggle("slow");
					
				}); 
			});
		</script>  
	</head>
	<body>
		<%
		if(session.getAttribute("emailId") != null) {
			response.sendRedirect("home.jsp");
		}
		%>
		<% 	String message = ""; %>
		<!-- outer div starts here.. -->
		<div id = "wrapper">
			<!-- header div starts here -->
			<div id = "header">
				<div style = "float: right;"><a href = "javascript:void(0)" onclick = "document.getElementById('signupform').style.display = 'none';document.getElementById('login-box').style.display = 'block';document.getElementById('background').style.display = 'block'" ><button class = "login_button" id = "log">Login</button></a></div>
				<!-- this div contains login form which is pop-up by clicking on login button -->
				<div id = "login-box" class = "login-popup">
					<a href = "javascript:void(0)" onclick = "document.getElementById('signupform').style.display = 'block';document.getElementById('login-box').style.display = 'none';document.getElementById('background').style.display = 'none'" class = "close"><img src = "images/close.jpg" class = "btn_close" title = "Close Window" alt = "Close" /></a>
					<html:form action = "Login" styleClass = "signin" method = "post">
						<table cellpadding = "5" cellspacing = "5">
							<tr>
								<td colspan = "2">
									<font color = "blue" size = "+4"><b>LOGIN NOW....</b></font> 
									<hr/>
								</td>
							</tr>
							<tr>
								<td align = "left"><span class=mandatory>*</span><font size = "+2" color = "blue">Email:</font> </td>
								<td>
									<html:text property = "email" styleId = "username" size = "40"></html:text><br/>
									<html:errors property = "email"/>
								</td>
							</tr> 
							<tr>
								<td align = "left"><span class=mandatory>*</span><font color = "blue" size = "+2">Password:</font></td>
								<td><html:password property = "password" styleId = "password" size = "40"></html:password><br/><html:errors property = "password"/></td>
							</tr>
							<tr>
								<td colspan = "2" align = "right">
									<%
									if(request.getAttribute("loginError") != null && request.getAttribute("loginError").toString().equals("Invalid"))
									{
									%>
									<font color = "red" size = "+1">Invalid Id Or Password!!!!!!</font>
									<%
									}
									%>
									<html:submit value = "LOGIN>>" styleId = "loginButton"></html:submit>
								</td>
							</tr>
							<tr>
								<td colspan = "2">
									<a class = "forgot" href = "javascript:void(0)" onclick = "document.getElementById('login-box').style.display = 'none';document.getElementById('forgot-password').style.display = 'block';document.getElementById('background').style.display = 'block';" style = "color:blue;font-size: 20px;">Forgot your password?</a>
								</td>
							</tr>
						</table>
					</html:form> 
				<!-- div ends here -->
				</div>
				<!-- this div contains a form which is pop-up by clicking on forgot password -->
				<div id = "forgot-password" class = "login-popup">
					<a href = "javascript:void(0)" onclick = "document.getElementById('signupform').style.display = 'block';document.getElementById('forgot-password').style.display = 'none';document.getElementById('background').style.display = 'none'" class = "close"><img src = "images/close.jpg" class = "btn_close" title = "Close Window" alt = "Close" /></a>
					<html:form action = "forgotPassword" styleClass = "signin" method = "post">
						<table cellpadding = "5" cellspacing = "5">
							<tr>
								<td colspan = "2">
									<font color = "blue" size = "+3"><b>ForGot Password....</b></font> 
									<hr/>
								</td>
							</tr>
							<tr>
								<td align = "left"><span class=mandatory>*</span><font size = "+2" color = "blue">Email:</font> </td>
								<td>
									<html:text property = "email" styleId = "username" size = "40"></html:text><br/>
								</td>
							</tr>
							<tr>
								<td colspan = "2" align = "right">
									<html:submit value = "Get Password" styleId = "loginButton"></html:submit>       
								</td>
							</tr>
							<tr>
								<td colspan = "2" align = "right">
									<%
									if(request.getAttribute("forgotPasswordError") != null) {
									%>
									<%=request.getAttribute("forgotPasswordError").toString() %>
									<%
									}
									%>			
								</td>
							</tr>
						</table>
					</html:form>
				<!-- div ends here -->
				</div>
				<!-- this div used for hide background display -->
				<div id = "background" class = "mask"></div>
				
			<!-- header div ends here -->
			</div>
			<!-- this is main container -->
			<div id = "main">
				<!-- this contains signup form -->
				<div id = signupform  >
					<html:form action = "sendActivation" method = "post">
						<table id = formtable>
						    <tr>
								<td colspan = "4" align = "left" ><h3> SignUp Here </h3></td>
						    </tr>
						    <tr>
								<td >
								    <html:text property = "email" styleId = "email"></html:text>
								</td> 
								<td > @</td>
								<td>
									<html:select property = "domains" styleId = "domain">
										<html:option value = "metagurukul.com">metagurukul.com</html:option>
										<html:option value = "metacube.com">metacube.com</html:option>
									</html:select>
							    </td>
								<td> 
									<html:submit  styleId = "submit" value = "  "  ></html:submit>
							    </td> 
							</tr>
						    <tr>
								<td colspan = "3" >
									<% 
									if(request.getAttribute("signupError") != null) { 
										if(request.getAttribute("signupError").toString().equals("emailBlank")) {
											message = "Please Provide Email To Sign Up";
										}
										else if(request.getAttribute("signupError").toString().equals("active")) {
											message = "You Already Have an Account!!! Please Login";
										}
										else if(request.getAttribute("signupError").toString().equals("incorrect")) {
											message = "Email Address May Be Incorrect";
										}
										else if(request.getAttribute("signupError").toString().equals("false")) {
											message = "Activation Mail Sent To Your Email\n Please Activate thourgh your Email";
										}
										else if(request.getAttribute("signupError").toString().equals("wrong")){
											message = "Something Went Wrong!!! Please Try Letter";
										}
									}
									%>
									<div id = "error"> <%=message %></div>
								</td>
							</tr>
					    </table>
					</html:form>
					<% 
					if(request.getAttribute("signupError") != null) { 
					%>
					<script type = "text/javascript">
						document.getElementById('error').style.display = 'block';
					</script>
					<%	
					}
					%>
				<!-- sign-up form ends here -->
				</div>
				<%
				if(request.getAttribute("loginError") != null) {
				%>
				<script type = "text/javascript">
					document.getElementById('login-box').style.display = 'block';
				</script>
				<script type = "text/javascript">
					document.getElementById('background').style.display = 'block';
				</script>
				<script type = "text/javascript">
					document.getElementById('signupform').style.display = 'none';
				</script>
				<%
				}
				%>
				<%
				if(request.getAttribute("forgotPasswordError") != null) {
				%>
				<script type = "text/javascript">
					document.getElementById('forgot-password').style.display = 'block';
				</script>
				<script type = "text/javascript">
					document.getElementById('background').style.display = 'block';
				</script>
				<script type = "text/javascript">
					document.getElementById('signupform').style.display = 'none';
				</script>
				<%
				}
				%>
				<!-- this contains hard-coded data -->
				<div class = define_metaconnect>
				   <p> 
						It is our small endeavour to provide a plateform to metaPeaple, To stay connected
						with each other. 
						MetaConnect is a place for people of MetaCube family, where they can
						share about their projects, current status, information, etc. with other
						MetaCube employees only. This way their information is only visible to the
						other employees. They can post, comment, share status with others in real
						time.
				    </p>
				</div>
				<!-- this contains hard-coded data -->
				<div class = team_member>
				    <table>
						<tr>
							<th>Name </th>
							<th> Email ID </th>
					    </tr>
					    <tr>
							<td> Rekha Jangir  </td>
							<td> <span>rekha.jangir@metagurukul.com</span> </td>
					    </tr>
					    <tr>
							<td> Jitendra Kumar  </td>
							<td> <span>jitendra.kumar@metagurukul.com</span> </td>
					    </tr>
					    <tr>
							<td> Jinesh Goyal  </td>
							<td> <span>jinesh.goyal@metagurukul.com</span> </td>
					    </tr>
					    <tr>
							<td> Pankaj Kabra  </td>
							<td> <span>pankaj.kabra@metagurukul.com</span> </td>
					    </tr>
					    <tr>
							<td> Mohit Chawla </td>
							<td> <span>mohit.chawla@metagurukul.com</span> </td>
					    </tr> 
				    </table>
				</div>
			<!-- main div ends here -->
			</div>
			<!-- footer div starts here -->
			<div id = "footer">
				<a class = flink id = define_metaconnect href = "#">What is MetaConnect?</a>|
				<a class = flink id = team_member href = "#">Team Members</a><br />
				Copyright &copy 2012. All Rights Reserved.
			<!-- footer div ends here -->
			</div> 
		<!-- outer div ends here -->
		</div>
	</body>
</html>